<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
</head>
<body>

<ul>
	<li>
		<span>奔驰</span>
		<button>点击删除</button>
	</li>
	<li>
		<span>宝马</span>
		<button>点击删除</button>
	</li>
	<li>
		<span>奥迪</span>
		<button>点击删除</button>
	</li>
</ul>
<script type="text/javascript">
	/*
		事件委托（事件代理）：
			利用事件冒泡的特性，将里面的事件委托给外层的事件，通过事件对象的属性进行事件委托改善性能
	*/
	let ul = document.querySelector('ul')
	// ev/e ---> 事件对象：浏览器触发事件的时候，会自动创建一个事件对象，其中存储了本次事件相关的信息，包括事件类型，事件目标，事件触发元素
	ul.onclick = function(e){
		//e.target e.target  永远指向触发事件的dom
		//e.target.tagName 触发事件的标签 大写
		console.log(e.target.tagName)
		if(e.target.tagName === 'BUTTON'){
			console.log(e.target)
			e.target.parentNode.remove()		
		}else if(e.target.tagName === 'SPAN'){
			e.target.parentNode.style.backgroundColor = 'pink'
		}
	}
</script>
</body>
</html>